<template>
<div style="display:flex;"  >
  <div class="dishdata" style="width:47%;height:20%;">
    <div class="dishdata_title" style="display:flex">
     <h3 class="dishdata_h2">菜品总览</h3>
        <span class="dishdata_title_date">{{nowday}}</span >
      <span class="dishdata_ovvern">菜品管理</span>
      <i style="margin-left:1px;margin-top:5px" class="el-icon-arrow-right" ></i>
    </div>

    <div class="dishdata_Box" >
      <ul style="display:flex">
        <li >
          <span style="font-size:27px" class="iconfont icon-RectangleCopy"></span>
          <p style="padding-left:4px;font-size:14px" class="name">已起售</p>
          <span style="color:red;" class="number">{{sold1}}</span>
        </li>
        <li >
         <span  style="" class="iconfont icon-tingshou_22_light"></span>
          <p style="padding-left:4px;font-size:14px">已停售</p>
          <span style="color:red" class="number">{{discontinued1}}</span>
        </li>

        <div class="dishdata_newdish"  @click="adddish">
         <span style="padding-top:3px"  class="iconfont icon-yuanquanjiahao"></span>

          <el-button  class="name">新增菜品</el-button>
          </div>

      </ul>
    </div>
  </div>

  <div class="mealdata" style="width:47%;height:20%">
    <div class="mealdata_title" style="display:flex">
     <h3 class="mealdata_h2">套餐总览</h3>
        <span class="mealdata_title_date">{{nowday}}</span >
      <span class="mealdata_ovvern">套餐管理</span>
        <i style="margin-left:1px;margin-top:5px" class="el-icon-arrow-right" ></i>
    </div>

    <div class="mealdata_Box" >
      <ul style="display:flex">
        <li >
          <span style="font-size:27px;"  class="iconfont icon-RectangleCopy"></span>
          <p style="padding-left:4px;font-size:14px" class="name">已起售</p>
          <span style="color:red;" class="number">{{sold2}}</span>
        </li>
        <li >
         <span   class="iconfont icon-tingshou_22_light"></span>
          <p style="padding-left:4px;font-size:14px">已停售</p>
          <span style="color:red" class="number">{{discontinued2}}</span>
        </li>

      <div class="dishdata_newdish" @click="addmeal" >
         <span style="padding-top:3px"  class="iconfont icon-yuanquanjiahao"></span>

          <el-button  class="name">新增套餐</el-button>
          </div>

      </ul>
    </div>
  </div>
  <AddDish :dialogVisible="dialogVisible"></AddDish>
  <AddMeal :dialogVisible="dialogVisible"></AddMeal>
  </div>
</template>

<script>
import Bus2 from '@/utils/EventBus'
import { overviewDishes, overviewSetmeals } from '@/api/wordspace'
import AddDish from '@/components/main/dish/adddish.vue'
import AddMeal from '@/components/main/meal/addmeal.vue'
import moment from 'moment'
export default {
  name: 'dishdataIndex',
  components: {
    AddDish,
    AddMeal
  },
  data () {
    return {
      dialogVisible: false,
      discontinued1: 0,
      sold1: 0,
      discontinued2: 0,
      sold2: 0,
      nowday: ''
    }
  },
  created () {
    this.init()
  },
  methods: {
    adddish () {
      // 添加菜品
      Bus2.$emit('sendMsg2', !this.dialogVisible)
    },
    addmeal () {
      // 添加套餐
      Bus2.$emit('sendMsg3', !this.dialogVisible)
    },
    async init () {
      this.nowday = moment().format('YYYY.MM.DD')
      const res1 = await overviewDishes()
      this.discontinued1 = res1.data.discontinued
      this.sold1 = res1.data.sold
      // console.log(res1, 'overviewDishes')

      const res2 = await overviewSetmeals()
      this.discontinued2 = res2.data.discontinued
      this.sold2 = res2.data.sold
    }
  }

}
</script>

<style lang="less" scoped>

// 菜品
.dishdata{
  /* 水平阴影位置 | 垂直阴影位置 | 模糊距离 | 阴影的颜色 */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.048);
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 20px;
}
.dishdata_Box{
padding-top:20px;
margin-left: -20px;
}

.dishdata_title_date{
  font-size: 12px;

  padding-top: 8px;
  padding-left: 10px;
  color: rgba(12, 12, 12, 0.582);
}
.dishdata_ovvern{
  padding-left: 57%;
   padding-top: 4px;
   font-size: 14px;
    color: rgba(12, 12, 12, 0.979);
}

li{
  display: flex;
  width: 30%;
  height: 50px;
  margin-left: 15px;
  padding-left: 20px;
  padding-top: 40px;
  background-color: rgba(221, 221, 80, 0.068);
}
.number{

  font-weight: 600;

  font-weight:600;
  padding-left:60px
}

//

// 套餐

.mealdata{
  /* 水平阴影位置 | 垂直阴影位置 | 模糊距离 | 阴影的颜色 */
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.048);
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
  margin-top: 20px;
  margin-left: 20px;

}
.mealdata_Box{
padding-top:20px;
margin-left: -20px;

}

.mealdata_title_date{
  font-size: 12px;

  padding-top: 8px;
  padding-left: 10px;
  color: rgba(12, 12, 12, 0.582);
}
.mealdata_ovvern{
  padding-left: 57%;
   padding-top: 4px;
   font-size: 14px;
    color: rgba(12, 12, 12, 0.979);
}
.dishdata_newdish{
   background-color: orange;
   height: 90px;
   width: 20%;
   margin-left: 40px;
   border-radius: 5px;

   display: flex; /* 使用Flexbox布局 */
  flex-direction: column; /* 设置主轴为垂直方向 */
  align-items: center; /* 在垂直方向上居中对齐 */
  justify-content: center; /* 在水平方向上居中对齐 */
   .name{
      margin: 10px; /* 元素之间的间隔 */
      background-color: orange;
      border: none;
      color: black;

   }
}
</style>
